<template>
  <div class="home">
    <div class="container">
      <div class="map">
        <Map @onload="handleMapLoad" :options="mapOptions" />
      </div>
      <left-box ref="leftBoxRef" @handleChangeLayer="handleChangeTree"> </left-box>
      <right-box :riverValue="state.riverValue" />
      <bottom-box />
      <StatisticsBox :riverValue="state.riverValue" />
      <div class="header-select">
        <el-select
          placeholder="请选择计算方案"
          v-model="state.schemeName"
          :teleported="false"
          @change="schemeChanged"
        >
          <template #prefix>
            <span style="padding-left: 5px" class="select-bg"></span>
          </template>
          <el-option
            :key="index"
            v-for="(item, index) in state.cal_schemes"
            :label="item.schemeName"
            :value="item.schemeId"
          />
        </el-select>
      </div>
      <div class="header-select-one">
        <el-select
          placeholder="请输入"
          v-model="state.riverValue"
          :teleported="false"
          @change="handleChangeSelect"
        >
          <template #prefix>
            <span style="padding-left: 5px" class="select-bg"></span>
          </template>
          <el-option label="大汶河流域" value="1" />
          <el-option label="沂沭河流域" value="2" />
        </el-select>
      </div>
    </div>
    <!-- 地图弹框 -->
    <MapPopup />
  </div>
</template>

<script setup>
import { reactive, ref, nextTick, onMounted } from 'vue'
import Map from '@/components/app-map/map.vue'
import leftBox from './cpns/LeftBox/Index.vue'
import rightBox from './cpns/RightBox/Index.vue'
import bottomBox from './cpns/BottomBox/Index.vue'
import StatisticsBox from './cpns/StatisticsBox/Index.vue'

//地图弹框
import MapPopup from '@/components/app-map-popup/index.vue'
//大汶河方案
import dwh_cal_schemes from '@/assets/data/cal_scheme/dwh_cal_schemes.json'
//沂沭河方案
import ysh_cal_schemes from '@/assets/data/cal_scheme/ysh_cal_schemes.json'
import {
  clearLayer,
  addTileLayer,
  removeLayer,
  addSecPoints,
  addSecName,
  addTopology,
  addJsUnit,
  addJsUnitNoScheme,
  addWataLayer,
  addRiverLayer,
  addNodeLayer,
  addRainLayer,
  addDynamicLayer,
  changeJsUnitSchemeGraphic,
  locatePoint,
  addDynamicLayerShowAll,
  addBasinVectorTiles,
  removeBasinVectorTiles,
  addImageToMap
} from '@/utils/mapUtils'
import {
  SEC_LAYER,
  RAIN_LAYER,
  SEC_NAME_LAYER,
  JS_UNIT_LAYER,
  TOPOLOGY_LAYER,
  XAJ_UNIT_LAYER,
  WATA_LAYER,
  RIVER_LAYER,
  NODE_LAYER,
  D1_SECTION_LAYER,
  D1_UNIT_LAYER,
  D2_GRID_LAYER,
  DWH_BASE_LAYER_URL,
  YSH_BASE_LAYER_URL,
  DWH_SECAREA_LAYER,
  DWH_SECAREA_LAYER_URL,
  DWH_SKBYUNIT_LAYER_URL,
  DWH_SKBYUNIT_LAYER,
  DWH_XAJUNIT_LAYER_URL,
  DWH_XAJUNIT_LAYER,
  DWH_SDLSEC_LAYER1_URL,
  DWH_SDLSEC1_LAYER,
  DWH_SDLSEC_LAYER2_URL,
  DWH_SDLSEC2_LAYER,
  YSH_SKBYUNIT_LAYER_URL,
  YSH_SKBYUNIT_LAYER,
  YSH_XAJUNIT_LAYER_URL,
  YSH_XAJUNIT_LAYER,
  YSH_SDLSEC_LAYER1_URL,
  YSH_SDLSEC1_LAYER,
  YSH_SDLSEC_LAYER2_URL,
  YSH_SDLSEC2_LAYER,
  DWH_BASE_LAYER,
  YSH_BASE_LAYER
} from '@/constants'
//地图api
import {
  getPPtnGeomList,
  getSecGeomList,
  getNodeGeomList,
  getTopologyGeomList
} from '@/services/modules/map.js'
import { intro, model, place, table_data } from './data'
// 地图JSON 数据
import secData from '@/assets/data/map_data/sec.json'

import jsUnitData from '@/assets/data/map_data/js_unit.json'

import topologyData from '@/assets/data/map_data/topology.json'

import wataData from '@/assets/data/map_data/wata.json'
import riverData from '@/assets/data/map_data/rivl.json'

import nodeData from '@/assets/data/map_data/node.json'

import unitSchemeJData1 from '@/assets/data/cal_scheme/unit_schemes_1.json'
import unitSchemeJData2 from '@/assets/data/cal_scheme/unit_schemes_2.json'
//沂沭河流域json
import yshsecData from '@/assets/data/map_data/yshInfo/sec.json'
import yshjsUnitData from '@/assets/data/map_data/yshInfo/unitdata.json'
import yshtopologyData from '@/assets/data/map_data/yshInfo/topologyData.json'
import yshnodeData from '@/assets/data/map_data/yshInfo/node.json'
// import
import emitter from '@/utils/bus'
const leftBoxRef = ref(null)
//方案数据
const introArr = reactive(intro)
const modelArr = reactive(model)
const placeArr = reactive(place)
const tableData = reactive(table_data)
//地图小流域河道
const baselayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF'
  }
  //水动力
  // ？？？
})
//时空变源style
const skbyUnitStyle = reactive({
  skby: {
    weight: 0.3,
    // fillOpacity: 0.6,
    fillColor: 'red',
    color: 'yellow',
    fill: false
  }
})
//大汶河时空变源方案style
const dwh_skby_schemeStyle = reactive({
  skby: {
    weight: 0.3,
    fillOpacity: 0.6,
    fillColor: '#0033CC',
    color: 'red',
    fill: true
  }
})
//沂沭河时空变源方案style
const ysh_skby_schemeStyle = reactive({
  skby: {
    weight: 0.3,
    fillOpacity: 0.6,
    fillColor: '#0033CC',
    color: 'red',
    fill: true
  }
})
//大汶河新安江方案style
const dwh_xaj_schemeStyle = reactive({
  xaj: {
    weight: 0.3,
    fillOpacity: 0.6,
    fillColor: '#66CC33',
    color: 'red',
    fill: true
  }
})
//沂沭河新安江方案style
const ysh_xaj_schemeStyle = reactive({
  xaj: {
    weight: 0.3,
    fillOpacity: 0.6,
    fillColor: '#66CC33',
    color: 'red',
    fill: true
  }
})
const sdlUnitStyle = reactive({
  sdl: {
    weight: 1,
    // fillOpacity: 0.6,
    fillColor: 'red',
    color: 'red',
    fill: false
  }
})
const sdl2UnitStyle = reactive({
  sdl: {
    weight: 1,
    fillOpacity: 0.6,
    color: 'red',
    fill: false
  }
})
//新安江 style
const xajUnitStyle = reactive({
  xaj: {
    weight: 0.3,
    // fillOpacity: 0.6,
    fillColor: 'green',
    color: 'red',
    fill: false
  }
})
//预报断面区域矢量切片图层样式
const secAreaStyle = reactive({
  skby: {
    weight: 0.3,
    fillOpacity: 1,
    fillColor: '#9eada1',
    color: 'red',
    fill: true
  }
})
// 地图初始化参数
const mapOptions = { crs: 'EPSG:4490', basemaps: [] }
const state = reactive({
  mapInit: {},
  pptn: {},
  secGeoData: {},
  nodeGeoData: {},
  topologyGeoData: {},
  basinValue: 1,
  riverValue: '1',
  schemeName: '',
  cal_schemes: dwh_cal_schemes,
  currentTabs: 0,
  activeClass: '',
  modelIndex: '',
  tabsArr: [
    {
      name: '基本信息'
    },
    {
      name: '使用概况'
    },
    {
      name: '评价反馈'
    }
  ]
})
//地图获取雨量站
function PPtnGeomList() {
  return new Promise((resolve, reject) => {
    getPPtnGeomList({ zoneId: state.riverValue }).then((res) => {
      if (res.code === 200) {
        state.pptn = res.data
        resolve(state.pptn)
      }
    })
  })
}
//地图获取预报对象
function SecGeomList() {
  return new Promise((resolve, reject) => {
    getSecGeomList({ zoneId: state.riverValue }).then((res) => {
      if (res.code === 200) {
        state.secGeoData = res.data
        resolve(state.secGeoData)
      }
    })
  })
}
//地图获取节点
function NodeGeomList() {
  return new Promise((resolve, reject) => {
    getNodeGeomList({ zoneId: state.riverValue }).then((res) => {
      if (res.code === 200) {
        state.nodeGeoData = res.data
        resolve(state.nodeGeoData)
      }
    })
  })
}
//地图获取拓扑线
function TopologyGeomList() {
  return new Promise((resolve, reject) => {
    getTopologyGeomList({ zoneId: state.riverValue }).then((res) => {
      if (res.code === 200) {
        state.topologyGeoData = res.data
        resolve(state.topologyGeoData)
      }
    })
  })
}
/**
 * 地图实例完成后的调用函数
 */
const handleMapLoad = async ({ map }) => {
  await PPtnGeomList()
  await SecGeomList()
  await NodeGeomList()
  await TopologyGeomList()
  const layerUrlS = mapUrl
  addTileLayer(window.mapInstance, layerUrlS, 0, 74, '山东底图')
  addDynamicLayerShowAll(
    window.mapInstance,
    'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/L1_Liuyujie/MapServer',
    12,
    11,
    '流域界'
  )
  addDynamicLayerShowAll(
    window.mapInstance,
    'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/Shandong_XZHQ/MapServer',
    26,
    32,
    '蓄滞洪区'
  )

  // 添加矢量切片数据
  addBasinVectorTiles(map, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
  // 添加大汶河时空变源切片数据
  // addBasinVectorTiles(map, DWH_SKBYUNIT_LAYER_URL, DWH_SKBYUNIT_LAYER, skbyUnitStyle)

  // 添加断面点
  addSecPoints(map, state.secGeoData.features, SEC_LAYER)
  // 添加断面名称
  addSecName(map, state.secGeoData.features, SEC_NAME_LAYER)
  //添加节点
  addNodeLayer(window.mapInstance, state.nodeGeoData, NODE_LAYER)
  //添加雨量站
  addRainLayer(window.mapInstance, state.pptn, RAIN_LAYER)
  //添加拓扑线
  addTopology(map, state.topologyGeoData, TOPOLOGY_LAYER)

  // //添加计算单元
  // addJsUnit(map, jsUnitData, JS_UNIT_LAYER)
  // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)

  // // //添加小流域
  // addWataLayer(map, wataData, WATA_LAYER)
  //添加河道
  // addRiverLayer(map, riverData, RIVER_LAYER)

  //测试添加图片到地图
  // addImageToMap(
  //   map,
  //   '测试图层',
  //   'http://39.98.214.43:8091/mxpt_backend/map/vectorTiles/getPng',
  //   116.043984,
  //   35.714097,
  //   118.011273,
  //   36.597304
  // ),
  // locatePoint(window.mapInstance, 117.1775, 36.06469, 10)
  // }, 100)
}
//修改流域
async function handleChangeSelect(item) {
  clearLayer(window.mapInstance, SEC_LAYER)
  clearLayer(window.mapInstance, SEC_NAME_LAYER)
  clearLayer(window.mapInstance, JS_UNIT_LAYER)
  clearLayer(window.mapInstance, TOPOLOGY_LAYER)
  clearLayer(window.mapInstance, NODE_LAYER)
  clearLayer(window.mapInstance, WATA_LAYER)
  clearLayer(window.mapInstance, RIVER_LAYER)
  clearLayer(window.mapInstance, NODE_LAYER)
  clearLayer(window.mapInstance, RAIN_LAYER)
  removeLayer(window.mapInstance, XAJ_UNIT_LAYER)
  removeLayer(window.mapInstance, D1_SECTION_LAYER)
  removeLayer(window.mapInstance, D2_GRID_LAYER)

  removeBasinVectorTiles(window.mapInstance, DWH_BASE_LAYER)
  removeBasinVectorTiles(window.mapInstance, YSH_BASE_LAYER)
  removeBasinVectorTiles(window.mapInstance, YSH_SKBYUNIT_LAYER)
  removeBasinVectorTiles(window.mapInstance, DWH_SKBYUNIT_LAYER)
  state.basinValue = item
  state.riverValue = item
  await PPtnGeomList()
  await SecGeomList()
  await NodeGeomList()
  await TopologyGeomList()
  state.schemeName = ''
  leftBoxRef.value.handleOpenModel()
  if (item == 2) {
    //添加拓扑线
    addTopology(window.mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    // 添加断面点
    addSecPoints(window.mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(window.mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    //添加沂沭矢量切片数据
    addBasinVectorTiles(window.mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, baselayerStyle)
    //添加沂沭河时空变源切片数据
    addBasinVectorTiles(
      window.mapInstance,
      YSH_SKBYUNIT_LAYER_URL,
      YSH_SKBYUNIT_LAYER,
      skbyUnitStyle
    )
    addBasinVectorTiles(window.mapInstance, YSH_XAJUNIT_LAYER_URL, YSH_XAJUNIT_LAYER, xajUnitStyle)
    // //添加计算单元
    // addJsUnit(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    // addJsUnitNoScheme(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    // //添加节点
    addNodeLayer(window.mapInstance, state.nodeGeoData, NODE_LAYER)
    state.cal_schemes = ysh_cal_schemes
    locatePoint(window.mapInstance, 118.379657, 35.018398, 10)
  } else if (item == 1) {
    // 添加断面点
    addSecPoints(window.mapInstance, state.secGeoData.features, SEC_LAYER)

    // 添加断面名称
    addSecName(window.mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    //添加大汶河矢量切片数据
    addBasinVectorTiles(window.mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
    //添加大汶河时空变源切片数据
    addBasinVectorTiles(
      window.mapInstance,
      DWH_SKBYUNIT_LAYER_URL,
      DWH_SKBYUNIT_LAYER,
      skbyUnitStyle
    )
    //添加预报单元
    addBasinVectorTiles(window.mapInstance, DWH_XAJUNIT_LAYER_URL, DWH_XAJUNIT_LAYER, xajUnitStyle)
    // //添加计算单元
    // addJsUnit(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
    // addJsUnitNoScheme(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
    //添加拓扑线
    addTopology(window.mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    // //添加小流域
    // addWataLayer(window.mapInstance, wataData, WATA_LAYER)
    // //添加河道
    //addRiverLayer(window.mapInstance, riverData, RIVER_LAYER)
    //添加节点
    addNodeLayer(window.mapInstance, state.nodeGeoData, NODE_LAYER)

    state.cal_schemes = dwh_cal_schemes
    locatePoint(window.mapInstance, 117.1775, 36.06469, 10)
  }
}
const schemeChanged = (value) => {
  removeBasinVectorTiles(window.mapInstance, DWH_SKBYUNIT_LAYER)
  removeBasinVectorTiles(window.mapInstance, DWH_XAJUNIT_LAYER)
  removeBasinVectorTiles(window.mapInstance, YSH_SKBYUNIT_LAYER)
  removeBasinVectorTiles(window.mapInstance, YSH_XAJUNIT_LAYER)
  switch (value) {
    case 0:
      addBasinVectorTiles(
        window.mapInstance,
        DWH_SKBYUNIT_LAYER_URL,
        DWH_SKBYUNIT_LAYER,
        skbyUnitStyle
      )
      break
    case 1:
      addBasinVectorTiles(
        window.mapInstance,
        DWH_SKBYUNIT_LAYER_URL,
        DWH_SKBYUNIT_LAYER,
        dwh_skby_schemeStyle
      )
      break
    case 2:
      addBasinVectorTiles(
        window.mapInstance,
        DWH_XAJUNIT_LAYER_URL,
        DWH_XAJUNIT_LAYER,
        dwh_xaj_schemeStyle
      )
      break
    case 3:
      addBasinVectorTiles(
        window.mapInstance,
        YSH_SKBYUNIT_LAYER_URL,
        YSH_SKBYUNIT_LAYER,
        skbyUnitStyle
      )
      break
    case 4:
      addBasinVectorTiles(
        window.mapInstance,
        YSH_SKBYUNIT_LAYER_URL,
        YSH_SKBYUNIT_LAYER,
        ysh_skby_schemeStyle
      )
      break
    case 5:
      addBasinVectorTiles(
        window.mapInstance,
        YSH_XAJUNIT_LAYER_URL,
        YSH_XAJUNIT_LAYER,
        ysh_xaj_schemeStyle
      )
      break

    default:
      break
  }
}
async function handleChangeTree(e) {
  let { event, item } = e
  //被选中的值
  console.log(event + ':' + item)
  // await PPtnGeomList()
  // await SecGeomList()
  // await NodeGeomList()
  // await TopologyGeomList()
  switch (item) {
    case 'sec':
      if (event) {
        if (state.riverValue == 1) {
          // 添加断面
          addSecPoints(window.mapInstance, state.secGeoData.features, SEC_LAYER)
          // 添加断面名称
          addSecName(window.mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
        } else if (state.riverValue == 2) {
          // 添加断面点
          addSecPoints(window.mapInstance, state.secGeoData.features, SEC_LAYER)
          // 添加断面名称
          addSecName(window.mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
        }
      } else {
        clearLayer(window.mapInstance, SEC_LAYER)
        clearLayer(window.mapInstance, SEC_NAME_LAYER)
      }
      break
    case 'jsUnitSk':
      if (event) {
        if (state.riverValue == 1) {
          //添加预报单元
          addBasinVectorTiles(
            window.mapInstance,
            DWH_SKBYUNIT_LAYER_URL,
            DWH_SKBYUNIT_LAYER,
            skbyUnitStyle
          )
          // //添加计算单元
          // addJsUnit(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
        } else if (state.riverValue == 2) {
          // // //添加计算单元
          // addJsUnit(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            YSH_SKBYUNIT_LAYER_URL,
            YSH_SKBYUNIT_LAYER,
            secAreaStyle
          )
        }
      } else {
        removeBasinVectorTiles(window.mapInstance, DWH_SKBYUNIT_LAYER)
        removeBasinVectorTiles(window.mapInstance, YSH_SKBYUNIT_LAYER)
      }
      break
    case 'jsUnitXaj':
      if (event) {
        if (state.riverValue == 1) {
          //添加预报单元
          addBasinVectorTiles(
            window.mapInstance,
            DWH_XAJUNIT_LAYER_URL,
            DWH_XAJUNIT_LAYER,
            xajUnitStyle
          )
          // //添加计算单元
          // addJsUnit(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
        } else if (state.riverValue == 2) {
          // // //添加计算单元
          // addJsUnit(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            YSH_XAJUNIT_LAYER_URL,
            YSH_XAJUNIT_LAYER,
            xajUnitStyle
          )
        }
      } else {
        removeBasinVectorTiles(window.mapInstance, DWH_XAJUNIT_LAYER)
        removeBasinVectorTiles(window.mapInstance, YSH_XAJUNIT_LAYER)
      }
      break
    case 'topology':
      if (event) {
        addTopology(window.mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
      } else {
        clearLayer(window.mapInstance, TOPOLOGY_LAYER)
      }
      break
    // case 'wata':
    //   if (event) {
    //     if (state.riverValue == 1) {
    //       //添加小流域
    //       // addWataLayer(window.mapInstance, wataData, WATA_LAYER)
    //       removeBasinVectorTiles(window.mapInstance, DWH_BASE_LAYER)
    //       addBasinVectorTiles(
    //         window.mapInstance,
    //         DWH_BASE_LAYER_URL,
    //         DWH_BASE_LAYER,
    //         baselayerStyle
    //       )
    //     } else if (state.riverValue == 2) {
    //       removeBasinVectorTiles(window.mapInstance, YSH_BASE_LAYER)
    //       addBasinVectorTiles(
    //         window.mapInstance,
    //         YSH_BASE_LAYER_URL,
    //         YSH_BASE_LAYER,
    //         baselayerStyle
    //       )
    //     }
    //   } else {
    //     clearLayer(window.mapInstance, WATA_LAYER)
    //     if (state.riverValue == 1) {
    //       removeBasinVectorTiles(window.mapInstance, DWH_BASE_LAYER)
    //       addBasinVectorTiles(
    //         window.mapInstance,
    //         DWH_BASE_LAYER_URL,
    //         DWH_BASE_LAYER,
    //         baselayerStyle
    //       )
    //     } else if (state.riverValue == 2) {
    //       removeBasinVectorTiles(window.mapInstance, YSH_BASE_LAYER)
    //       addBasinVectorTiles(
    //         window.mapInstance,
    //         YSH_BASE_LAYER_URL,
    //         YSH_BASE_LAYER,
    //         baselayerStyle
    //       )
    //     }
    //   }
    //   break
    case 'river':
      if (event) {
        if (state.riverValue == 1) {
          //添加小流域
          // addWataLayer(window.mapInstance, wataData, WATA_LAYER)
          removeBasinVectorTiles(window.mapInstance, DWH_BASE_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            DWH_BASE_LAYER_URL,
            DWH_BASE_LAYER,
            baselayerStyle
          )
        } else if (state.riverValue == 2) {
          removeBasinVectorTiles(window.mapInstance, YSH_BASE_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            YSH_BASE_LAYER_URL,
            YSH_BASE_LAYER,
            baselayerStyle
          )
        }
        // //添加河道
        // addRiverLayer(window.mapInstance, riverData, RIVER_LAYER)
      } else {
        if (state.riverValue == 1) {
          // clearLayer(window.mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(window.mapInstance, DWH_BASE_LAYER)
        } else if (state.riverValue == 2) {
          // clearLayer(window.mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(window.mapInstance, YSH_BASE_LAYER)
        }
      }
      break
    case 'node':
      if (event) {
        addNodeLayer(window.mapInstance, state.nodeGeoData, NODE_LAYER)
      } else {
        clearLayer(window.mapInstance, NODE_LAYER)
      }
      break
    case 'rainSite':
      if (event) {
        addRainLayer(window.mapInstance, state.pptn, RAIN_LAYER)
      } else {
        clearLayer(window.mapInstance, RAIN_LAYER)
      }
      break
    default:
      break
  }
}
//mapLayerHandle
emitter.on('mapLayerHandle', (value) => {
  //地图交互
  const modelName = value.btnName
  // const baseLayerUrl = ''
  const baseLayerUrl = mapUrl
  // const baseLayerUrl =
  //   'http://39.98.214.43:6080/arcgis/rest/services/DaWenHeDynamicLayers/MapServer'
  if (window.mapInstance != null) {
    setTimeout(() => {
      //清除地图模型图层
      //清除新安江计算单元图层
      clearLayer(window.mapInstance, WATA_LAYER)
      clearLayer(window.mapInstance, RIVER_LAYER)
      // clearLayer(window.mapInstance, NODE_LAYER)
      removeLayer(window.mapInstance, XAJ_UNIT_LAYER)
      removeLayer(window.mapInstance, D1_SECTION_LAYER)
      removeLayer(window.mapInstance, D2_GRID_LAYER)
      removeBasinVectorTiles(window.mapInstance, YSH_SKBYUNIT_LAYER)
      removeBasinVectorTiles(window.mapInstance, DWH_SKBYUNIT_LAYER)
      removeBasinVectorTiles(window.mapInstance, YSH_XAJUNIT_LAYER)
      removeBasinVectorTiles(window.mapInstance, DWH_XAJUNIT_LAYER)
      removeBasinVectorTiles(window.mapInstance, YSH_SDLSEC1_LAYER)
      removeBasinVectorTiles(window.mapInstance, DWH_SDLSEC1_LAYER)
      removeBasinVectorTiles(window.mapInstance, YSH_SDLSEC2_LAYER)
      removeBasinVectorTiles(window.mapInstance, DWH_SDLSEC2_LAYER)
      switch (modelName) {
        case '新安江':
          console.log('66', state.basinValue)
          if (state.basinValue == 1) {
            addBasinVectorTiles(
              window.mapInstance,
              DWH_XAJUNIT_LAYER_URL,
              DWH_XAJUNIT_LAYER,
              xajUnitStyle
            )
          } else if (state.basinValue == 2) {
            addBasinVectorTiles(
              window.mapInstance,
              YSH_XAJUNIT_LAYER_URL,
              YSH_XAJUNIT_LAYER,
              xajUnitStyle
            )
          }
          // addDynamicLayer(window.mapInstance, baseLayerUrl, [3], XAJ_UNIT_LAYER)
          // addBasinVectorTiles(window.mapInstance,DWH_SKBYUNIT_LAYER_URL,DWH_SKBYUNIT_LAYER,skbyUnitStyle)

          break
        case '时空变源':
          if (state.basinValue == 1) {
            addBasinVectorTiles(
              window.mapInstance,
              DWH_SKBYUNIT_LAYER_URL,
              DWH_SKBYUNIT_LAYER,
              skbyUnitStyle
            )
          } else if (state.basinValue == 2) {
            addBasinVectorTiles(
              window.mapInstance,
              YSH_SKBYUNIT_LAYER_URL,
              YSH_SKBYUNIT_LAYER,
              skbyUnitStyle
            )
          }

          //添加小流域
          // addWataLayer(window.mapInstance, wataData, WATA_LAYER)
          // //添加河道
          // addRiverLayer(window.mapInstance, riverData, RIVER_LAYER)
          // //添加节点
          // addNodeLayer(window.mapInstance, nodeData, NODE_LAYER)
          break
        case '一维水动力':
          if (state.basinValue == 1) {
            addBasinVectorTiles(
              window.mapInstance,
              DWH_SDLSEC_LAYER1_URL,
              DWH_SDLSEC1_LAYER,
              sdlUnitStyle
            )
          } else if (state.basinValue == 2) {
            addBasinVectorTiles(
              window.mapInstance,
              YSH_SDLSEC_LAYER1_URL,
              YSH_SDLSEC1_LAYER,
              sdlUnitStyle
            )
          }

          // addDynamicLayer(window.mapInstance, baseLayerUrl, [0, 2], D1_SECTION_LAYER)
          break
        case '二维水动力':
          // addDynamicLayer(window.mapInstance, baseLayerUrl, [1, 2], D2_GRID_LAYER)
          if (state.basinValue == 1) {
            addBasinVectorTiles(
              window.mapInstance,
              DWH_SDLSEC_LAYER2_URL,
              DWH_SDLSEC2_LAYER,
              sdl2UnitStyle
            )
          } else if (state.basinValue == 2) {
            addBasinVectorTiles(
              window.mapInstance,
              YSH_SDLSEC_LAYER2_URL,
              YSH_SDLSEC2_LAYER,
              sdl2UnitStyle
            )
          }
          break
        default:
          break
      }
    }, 100)
  }
})
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .map {
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
    }

    //下拉框
    :deep(.el-select-dropdown) {
      border: none !important;
      background-color: rgba(1, 28, 82, 0.8);
    }
    //输入框
    .el-input__inner {
      color: #eee;
      border-color: #00fff6;
      background-color: rgba(1, 28, 82, 0.8);
    }
    //聚焦时的样式
    .el-select .el-input.is-focus .el-input__inner {
      border-color: #0b61aa;
      background-color: rgba(1, 28, 82, 0.8);
      color: #00d3e9;
    }
    //下拉框选中
    .el-select-dropdown__item {
      color: #eee;
      background-color: rgba(1, 28, 82, 0.8);
    }
    //鼠标经过下拉框
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      color: #00d3e9;
      background-color: #0f3360;
    }
    .header-select {
      position: absolute;
      top: 30px;
      left: 380px;
      .select-bg {
        display: inline-block;
        background: url(@/assets/images/u101.png) no-repeat;
        width: 15px;
        height: 20px;
        background-size: 100% 100%;
        line-height: 20px;
      }
      :deep(.el-input__wrapper) {
        background: rgba(40, 64, 124, 0.8);
        box-shadow: inset 0 0 12px 1px rgb(39 151 255 / 49%);
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #097c97;
      }
      :deep(.el-input__inner) {
        color: white;
      }
    }
    .header-select-one {
      position: absolute;
      top: 30px;
      right: 380px;
      .select-bg {
        display: inline-block;
        background: url(@/assets/images/home/u97.png) no-repeat;
        width: 15px;
        height: 20px;
        background-size: 100% 100%;
        line-height: 20px;
      }
      :deep(.el-input__wrapper) {
        background: rgba(40, 64, 124, 0.8);
        box-shadow: inset 0 0 12px 1px rgb(39 151 255 / 49%);
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #097c97;
      }
      :deep(.el-input__inner) {
        color: white;
      }
    }
  }
}
</style>
